<template>
	<view class="purchaseTickets">
		<view class="list" v-for="(item, index) in data.GoodsSpec">
			<view class="title">选择{{ item.name }}</view>
			<view class="arr flex">
				<view class="item" @click="change(index, i_index)" :class="itemCur(index, i_index)" v-for="(i_item, i_index) in item.spec_value">
					{{ i_item.value }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'purchaseTickets',

		props: {
			data: {
				type: Object,
				default: () => {},
			},
		},
		data() {
			return {
				select: {},
			};
		},

		watch: {
			data(newValue, oldValue) {
				for (let i in newValue) {
					this.select[i] = 0;
				}
				this.initPrice();
			},
		},
		methods: {
			itemCur(index, i_index) {
				const select = this.select;
				let str = '';
				if (!select[index] && i_index == 0) {
					str = 'itemCur';
				} else if (select[index] === i_index) {
					str = 'itemCur';
				}
				return str;
			},
			change(index, i_index) {
				this.select[index] = i_index;
				this.initPrice();
				this.$forceUpdate();
			},
			initPrice() {
				const arr = this.data.GoodsSpec;
				let str = '';
				for (let i in arr) {
					const item = arr[i].spec_value[this.select[i] ? this.select[i] : 0].id;
					str = str === '' ? item : str + ',' + item;
				}
				
				const price = this.data.GoodsItem[str].price;
				this.$emit('editPrice', { price, GoodsItem: str });
			},
		},
	};
</script>

<style lang="scss" scoped>
	.purchaseTickets {
		margin-top: 20rpx;
		background: #ffffff;
		overflow: hidden;
		.list {
			overflow: hidden;
			.title {
				margin-top: 30rpx;
				margin-left: 30rpx;
				margin-bottom: 20rpx;
				color: #000000;
				font-size: $uni-font-size-12;
			}
			.arr {
				width: 690rpx;
				margin: 20rpx auto;
				align-items: center;
				flex-wrap: wrap;
				.item {
					border-radius: 10rpx;
					border: 1rpx solid #999999;
					color: #999999;
					height: 60rpx;
					line-height: 60rpx;
					padding: 0 18rpx;
					font-size: $uni-font-size-12;
					margin-right: 20rpx;
				}
				.itemCur {
					background: $price-color;
					color: $txt-color;
					border: 1rpx solid $price-color;
				}
			}
		}
	}
</style>
